<template>
  <div class="workSpace">
    <div class="workSpace-warp" v-if="!ifrUrl">
      <h2 class="title">🖥 Hail to CodeServer</h2>
      <h3 class="title-h3">Code is all you need</h3>
      <n-input-group style="justify-content: center">
        <n-input placeholder="" v-model:value="url" class="url-ipt"></n-input>
        <n-button type="primary" ghost @click="ifrUrl = url">
          Connect
        </n-button>
      </n-input-group>
      <h3 class="title-h3 title__vaMid"><HandUp theme="outline" size="24" fill="#333" :strokeWidth="3"/>Enter your codeserver url</h3>
    </div>
    <iframe v-if="ifrUrl" :src="ifrUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
  </div>
</template>

<script setup>
import { HandUp } from '@icon-park/vue-next'
import { NInput, NInputGroup, NButton } from 'naive-ui'
import {ref} from "vue";


let url = ref(null)
let ifrUrl = ref(null)


</script>

<style scoped>
.workSpace {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  border: 1px solid black;
}
.title {
  font-size: 46px;
}
.title-h3 {
  font-size: 24px;
}
.workSpace-warp {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding-top: 8%;
}
.title__vaMid *{
  vertical-align: middle;
  padding: 0 10px;
}
.url-ipt {
  width: 300px;
  border-radius: 10px;
}
</style>
